<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24">
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="5" :sm="12">
                <a-form-item label="姓名">
                  <j-input placeholder="" v-model="queryParam.realname"></j-input>
                </a-form-item>
              </a-col>

              <a-col :md="5" :sm="12">
                <a-form-item label="账号">
                  <j-input placeholder="" v-model="queryParam.username"></j-input>
                </a-form-item>
              </a-col>

              <a-col :md="5" :sm="12">
                <a-form-item label="组织名称">
                  <j-input placeholder="" v-model="queryParam.tenantName"></j-input>
                </a-form-item>
              </a-col>

              <a-col :md="5" :sm="12">
                <a-form-item label="部门">
                  <j-input placeholder="" v-model="queryParam.departName"></j-input>
                </a-form-item>
              </a-col>

              <a-col :md="4" :sm="8">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
                  <a-button v-has="'user:add'" type="primary" @click="handleAdd" icon="plus" style="margin-left: 8px">新增</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <div>
          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="id"
            :scroll="{x:true}"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">

            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)" v-has="'user:edit'">编辑</a>

              <a-divider type="vertical"/>

              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多 <a-icon type="down"/>
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a v-has="'user:queryById'" href="javascript:;" @click="handleDetail(record)">详情</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm v-has="'user:delete'" title="确定删除吗?" @confirm="() => doDelete(record)">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a v-has="'user:resetPassword'" href="javascript:;" @click="handleChangePassword(record.username)">重置密码</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a v-has="'user:project'" href="javascript:;" @click="userProject(record)">项目权限</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>

            <span slot="status" slot-scope="text, record">
              <a-switch
                checked-children="开启"
                un-checked-children="禁用"
                :checked="record.userStatus == 1"
                @click="statusEdit(record)"/>
            </span>
          </a-table>
        </div>

        <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>
        <user-tenant-modal ref="modalForm" @ok="modalFormOk"></user-tenant-modal>
        <user-project-modal ref="userProjectForm"></user-project-modal>
        <user-tenant-add-modal ref="addModalForm" @ok="modalFormOk"></user-tenant-add-modal>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JInput from '@comp/jeecg/JInput'
  import PasswordModal from './modules/PasswordModal.vue'
  import UserTenantModal from './modules/UserTenantModal.vue'
  import { api } from './service'
  import UserProjectModal from './project/UserProjectModal.vue';
  import UserTenantAddModal from './modules/UserTenantAddModal.vue'
  import { TENANT_ID } from '@/store/mutation-types'
  import Vue from 'vue';
  import { updateTenantUserStatus } from '../../tenant/user/service'

  export default {
    name: 'UserListNew',
    mixins: [JeecgListMixin],
    components: {
      JInput,
      PasswordModal,
      UserTenantModal,
      UserProjectModal,
      UserTenantAddModal
    },
    data() {
      let that = this;
      return {
        description: '用户管理',
        disableMixinCreated: true,
        tenantId: '',
        columns: [
          {
            title: '#',
            align: 'center',
            width: 60,
            dataIndex: 'rowIndex',
            customRender: function (t, r, index) {
              return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
            }
          },
          {
            title: '账号',
            dataIndex: 'username'
          },
          {
            title: '姓名',
            dataIndex: 'realname'
          },
          {
            title: '手机号码',
            dataIndex: 'phone'
          },
          {
            title: '组织名称',
            dataIndex: 'tenantName'
          },
          {
            title: '部门',
            dataIndex: 'departNames',
            customRender: function(text) {
              return text ? text.replaceAll(',', '，') : '';
            }
          },
          {
            title: '负责部门',
            dataIndex: 'departIdsName',
            customRender: function(text) {
              return text ? text.replaceAll(',', '，') : '';
            }
          },
          {
            title: '角色',
            dataIndex: 'roleNames',
            width: 300,
            customRender: function(text) {
              return text ? text.replaceAll(',', '，') : '';
            }
          },
          {
            title: '职务',
            dataIndex: 'postName'
          },
          {
            title: '状态',
            align: 'center',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            fixed: 'right',
            width: 120,
            align: 'center'
          }
        ],

        selectedKeys: [],

        url: {
          list: api.list,
          delete: ''
        }
      }
    },
    created() {
      this.tenantId = Vue.ls.get(TENANT_ID)
      this.queryParam.tenantId = this.tenantId;
      this.queryParam.wrapper = true;
      this.searchQuery();
    },
    methods: {
      passwordModalOk() {
        // TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
      },
      handleChangePassword(username) {
        this.$refs.passwordmodal.show(username);
      },
      statusEdit(record) {
        let that = this;
        record.userStatus = 3 - record.userStatus;
        let param = { status: record.userStatus };
        updateTenantUserStatus(record.tenantId, record.userId, param).then(res => {
          if (res.success) {
            that.$message.success('操作成功')
          } else {
            record.userStatus = 3 - record.userStatus;
            that.$message.warning(res.message)
          }
        });
      },
      doDelete(record) {
        this.url.delete = api.delete(record.userId, record.tenantId);
        this.handleDelete();
      },
      userProject: function (record) {
        this.$refs.userProjectForm.show(record.tenantId, record.userId);
      },
      onSelect: function (selectedKeys) {
        if (selectedKeys[0] > 0) {
          this.queryParam.belongDepartId = selectedKeys[0]
        } else {
          this.queryParam.belongDepartId = undefined;
        }
        this.searchQuery()
        this.selectedKeys = selectedKeys;
      },
      handleAdd: function() {
        this.$refs.addModalForm.add(this.tenantId);
        this.$refs.addModalForm.title = '新增';
        this.$refs.addModalForm.disableSubmit = false;
      },
      handleEdit(record) {
        this.$refs.modalForm.edit(record, this.tenantId);
        this.$refs.modalForm.title = '编辑';
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDetail: function(record) {
        this.$refs.modalForm.edit(record,this.tenantId);
        this.$refs.modalForm.title = '详情';
        this.$refs.modalForm.disableSubmit = true;
      }
    }
  }
</script>
